<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/search.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>


</head>
<body>
    <div class="mains pd12 border_box">
        <div class="flex_x start algin_center back">
            <i class="iconfont mr_20"> &#xe84f;</i>
            <h4>Search</h4>
        </div>
        <div class="s_area margin0 border_box">
            <input type="text" placeholder="Search for artists and moods" name="" id="">
        </div>
        <div class="keys font_16">Search History</div>
        <div class="k_area txt_center font_9 mt_16">Thinking out loud</div>
        <div class="keys font_16">Recommended to You</div>
        <div class="ani_area pd12 border_box pos_r">
            <div class="pos_a num1 txt_center algin_center mt_20 ml_20">
                <span class="txt1 font_blod">POP</span>
            </div>
            <div class="pos_a num2 txt_center algin_center mt_20 ml_20">
                <span class="txt2 font_blod">Hip pop</span>
            </div>
            <div class="pos_a num3 txt_center algin_center mt_20 ml_20">
                <span class="txt3 font_blod">Electronic</span>
            </div>
            <div class="pos_a num4 txt_center algin_center mt_20 ml_20">
                <span class="txt4 font_blod">Folk</span>
            </div>
            <div class="pos_a num5 txt_center algin_center mt_20 ml_20">
                <span class="txt5 font_blod">Rock</span>
            </div>
        </div>
    </div>
</body>
<script>
      $(function(){
        $('.back').click(function(){
            window.history.back()
        })
    })
</script>
</html>